<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.2.1.min.js"></script>
		<style>
			*{margin:0;padding:0;}
			.container {
				width: 100%;
				height: 200px;
				text-align: center;
			}

			.imgMax {
				width: 100%;
			}

			.containerBg {
				background-color: black;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0px;
				left: 0px;
				z-index: 111
			}

			.containerBg img {
				width: 100%;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="imgMax" src="img/test.jpg" alt="">
			</div>
		<div class="containerBg" style="display: none;">
			<img class="containerBgImg" style="transform: translate(0px,0px) translateZ(0px)" src="img/test.jpg" alt="">
			<span style="color: #FFFFFF;">11111111111111</span>
		</div>
	</body>
</html>


<script>
	var dis = [];
	var x;
	var y;
	var disMinOld = 1;
	var disMin = 1;
	var transX;
	var transY;
	var posX = 0;
	var posY = 0;
	$(".imgMax").on('click', function() {
		$(".containerBg").show();
	});
	$(document).on('touchstart', '.containerBgImg', function(e) {
		var evt = e.originalEvent;
		//        if(evt.touches.length == 2) {
		x = Number(evt.touches[0].clientX);
		y = Number(evt.touches[0].clientY);
		//        }
		var matrix = $(".containerBgImg").css('transform');
		transX = parseFloat(matrix.split("(")[1].split(")")[0].split(", ")[4]);
		transY = parseFloat(matrix.split("(")[1].split(")")[0].split(", ")[5]);
	});
	$(document).on('touchmove', '.containerBgImg', function(e) {
		touchMoveImg(e)
	});
	$(".containerBgImg").on('touchend', function(e) {
		dis = [];
		disMinOld = disMin;
	});

	function touchMoveImg(e) {
		e.preventDefault();
		var evt = e.originalEvent;
		try {
			if (evt.touches.length == 2) {
				var x1 = Number(evt.touches[1].clientX);
				var y1 = Number(evt.touches[1].clientY);
				dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
				if (dis.length > 1) {
					disMin = dis[dis.length - 1] / dis[0];
					disMin = disMinOld * disMin;
					$(".containerBgImg").css({
						'webkitTransform': 'scale(' + disMin + ') translate(' + transX + 'px,' + transY + 'px)'
					})
				}
			} else if (evt.touches.length == 1) {
				var x1 = Number(evt.touches[0].clientX);
				var y1 = Number(evt.touches[0].clientY);
				posX = parseFloat(x1 - x);
				posY = parseFloat(y1 - y);
				posX = posX + transX;
				posY = posY + transY;
				$(".containerBgImg").css({
					'transform': 'translate(' + posX + 'px,' + posY + 'px) scale(' + disMinOld + ')',
					'-webkit-transform': 'translate(' + posX + 'px,' + posY + 'px) scale(' + disMinOld + ')',
					'-ms-transform': 'translate(' + posX + 'px,' + posY + 'px) scale(' + disMinOld + ')'
				})

			}
		} catch (e) {
			alert('touchMoveFunc：' + e.message);
		}

	}
</script>
